/* 定义居中样式 */
#menu_wrapper {
    position: relative;
    margin: 11px auto;
    height: 904px;
}
.menu_wrapper .menu_box{
    opacity: 0;
    transition: 1s;
    position: absolute;
}
.menu_wrapper .menu_box .menu_box_list{
    height: 685px;
}
/* 菜谱区域左箭头 */
#menubtnLeft {
    position: absolute;
    /* 设置精灵图显示的位置来显示相应方向的箭头 */
    background:  url("/meishimeike/logo/arrow.gif")0px 0px no-repeat;
    width: 130px;
    height: 130px;
    top: 475px;
    left: -130px;
}
/* 菜谱区域右箭头样式 Begin */
#menubtnRight {
    position: absolute;
    /* 设置精灵图显示的位置来显示相应方向的箭头 */
    background: url("/meishimeike/logo/arrow.gif")0px -130px no-repeat;
    width: 130px;
    height: 130px;
    top: 475px;
    right: -130px;
}
#menubtnLeft:hover{
    cursor: pointer;
}
#menubtnRight:hover{
    cursor: pointer;
}
#menubtnLeft:active{
    /* 鼠标点击更改精灵图显示的位置 */
    background: url("/meishimeike/logo/arrow.gif")-130px 0px no-repeat;
}
#menubtnRight:active{
    /* 鼠标点击更改精灵图显示的位置 */
    background: url("/meishimeike/logo/arrow.gif")-130px -130px no-repeat;
}
/* 菜谱区域右箭头样式 GND */


.menu_wrapper .menu_box.active{
    z-index: 100;
    opacity: 1;
}
/* 指标 */
.menu_wrapper ul.point {
    position: absolute;
    z-index: 200;
    right: 6px;
    bottom: 794px;
    font-weight: bold;
}
.menu_wrapper li.pot {
    margin-left: 6px;
    float: left;
    font-size: 16px;
    font-weight: bold;
}
.menu_wrapper li.pot:hover {
    cursor: pointer;
}
 .menu_wrapper .pot.active {
   color: #ff8f17;
}

 /* 八个小盒子的样式 */
 /* 因为要调用函数需要执行元素的类名必须是空的，要不然还得再写一个循环，所以就将类名改成ID 方便调用函数 begin*/
.menu_wrapper .menu_box_list .menu_littlebox{
    position: relative;
    float: left;
    width: 232px;
    height: 332px;
    margin-left: 20px;
    margin-bottom: 20px;
    background: #FAE8C8;
    /* background: rgb(107, 100, 100); */
 }
#menu_1,#menu_2, #menu_3, #menu_4, #menu_5,
#menu_6, #menu_7, #menu_8{
    margin-left: 0px;
    /* background: rgb(107, 100, 100); */
}

/* end */

/* 栏目索引区域样式 */
.menu_wrapper .column_index{
    position: relative;
    float: left;
    margin-left: 20px;
    width: 232px;
    height: 332px;
    margin-bottom: 20px;
    background: #fff;
 }
.menu_wrapper .column_index h3{
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-indent: 14px;
    border-bottom: 1px solid #ddd;
    background: #fff;
} 
.menu_wrapper .column_index ul{
     padding: 14px;
} 
.menu_wrapper .column_index li{
    display: inline-block;
    height: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
} 
.menu_wrapper .column_index a{
    color: #666;
    display: inline-block;
    padding: 0px 10px;
    background: #fcfcfc;
    border: 1px solid #ddd;
    height: 28px;
    font-size: 14px;
    line-height: 28px;
    transition: 0.3s;
} 
.menu_wrapper .column_index ul li a.out{
    background: #ff3232;
    color: #fff;
    border: 1px solid #e90808;
} 
.menu_wrapper .column_index li a:hover{
    background: red;
    color: white;
}
.menu_wrapper .column_index li a.out:hover{
    background: rgb(201, 36, 36);
    color: white;
}
/* 栏目索引区域样式 */



.menu .menu_box_list a{
    display: block;
    height: 332px;
    width: 232px;
    white-space: nowrap;
}
.menu_wrapper .menu_box_list img{
    display: block;
    height: 232px;
    width: 232px;
}
/* 设置需要移动的小盒子的外层盒子并且设置相对路径以便两个小盒子的外层盒子设置top属性移动 */
.menu_wrapper .menu_box_list .boxlist_wai{
    height: 100px;
    width: 232px;
    overflow: hidden;
    position: relative;
}
/* 设置两个小盒子的外层盒子移动变化的距离 */
.menu_wrapper .menu_box_list .boxlist_wai .boxlist_li{ 
    height: 200px;
    width: 232px;
    top: 0px;
    transition: 0.6s;
    position: absolute;
}
.menu_wrapper .menu_box_list .boxlist_wai .boxlist_li .boxlist_li_1{ 
    height: 100px;
    width: 232px;
}
.menu_wrapper .menu_box_list .boxlist_wai .boxlist_li .boxlist_li_1 strong{
    display: block;
    height: 24px;
    line-height: 24px;
    padding: 9px 14px 0px;
    font-size: 14px;
    color: black;
    font-weight: bold;
}
.menu_wrapper .menu_box_list .boxlist_wai .boxlist_li .boxlist_li_1 span{
    display: block;
    height: 26px;
    line-height: 26px;
    padding: 0px 14px 0px;
    font-size: 12px;
    color: rgb(56, 56, 56);
}
.menu_wrapper .menu_box_list .boxlist_wai .boxlist_li .boxlist_li_1 em{
    display: block;
    height: 23px;
    line-height: 23px;
    padding: 0px 14px 0px;
    font-size: 12px;
    color: #e61414;
}
.menu_wrapper .menu_box_list .boxlist_wai .boxlist_li .boxlist_li_2{ 
    height: 100px;
    width: 232px;
    background: #2FC3A2;
}
.menu_wrapper .menu_box_list .boxlist_wai .boxlist_li .boxlist_li_2 ul{
    padding: 20px 0px 15px 14px;
}
.menu_wrapper .menu_box_list .boxlist_wai .boxlist_li .boxlist_li_2 ul li{
    float: left;
    height: 32px;
    width: 208px;
    background: url("/meishimeike/menu/photoicon.png") no-repeat;
    text-indent: 32px;
    line-height: 32px;
    color: #666;
    font-size: 14px;
}
/* 设置精灵图的位置 */
.menu_wrapper .menu_box_list .boxlist_wai .boxlist_li .boxlist_li_2 ul li.phototop{
    background-position: -8px -126px;
}
.menu_wrapper .menu_box_list .boxlist_wai .boxlist_li .boxlist_li_2 ul li.photobotoom{
    background-position: -8px -44px;
}
/* 设置JS鼠标指在哪 哪个元素就加上on类的样式：实现动画效果 */
.menu_wrapper .menu_box .menu_box_list .menu_littlebox.on .boxlist_li{
    top:-100px
}

/* 菜谱标志 */
.icon{
    height: 38px;
    position: absolute;
    right: -6px;
    top: 12px;
    background: url("/meishimeike/logo/daojiaoyinying.png") right 32px no-repeat;
}
.icon span{
    display: inline-block;
    padding: 0px 12px;
    background: #60a531;
    line-height: 32px;
    color: #fff;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
    font-size: 14px;
}